<template>
  <view class="note-container">
    <!-- 筛选区域 -->
    <u-tabs
      :list="statusSelect.list"
      :is-scroll="true"
      v-model="statusSelect.current"
      @change="statusSelectConfirm"
    ></u-tabs>

    <!-- 列表区域 -->
    <scroll-view
      scroll-y="true"
      class="list-container"
      :refresher-triggered="refresherTriggered"
      :refresher-enabled="true"
      refresher-background="#f3f4f6"
      @refresherrefresh="refresherRefresh"
      @scrolltolower="nextPage"
    >
      <NoteListItem
        :data="item"
        v-for="(item, index) in data.list"
        :key="item._id"
        @handleMenu="handleMenu(item)"
      />
      <!-- 分页加载 -->
      <u-loadmore :status="data.loadmore" @loadmore="nextPage" />
    </scroll-view>

    <!-- 新增 -->
    <view class="add-btn" @tap="toAdd">
      <u-icon name="plus" color="#fff" :size="29"></u-icon>
    </view>
    <!-- 操作弹窗 -->
    <u-action-sheet
      :list="[{ text: '查看' }, { text: '编辑' }, { text: '删除' }]"
      v-model="show"
      @click="clickAction"
    ></u-action-sheet>
  </view>
</template>

<script setup>
import {
  computed,
  reactive,
  ref,
  nextTick,
  onMounted,
  onBeforeUnmount,
} from "vue";
import NoteListItem from "./components/NoteListItem.vue";
// 分页参数
const pagination = reactive({
  pageSize: 10,
  pageIndex: 1,
});

// 列表数据
const data = reactive({
  list: [],
  total: 0,
  loadmore: "loadmore",
});

// 状态筛选
const statusSelect = reactive({
  current: 0,
  list: [],
});

statusSelect.current = computed({
  get() {
    const value = vk.getVuex("runningData.activeClassification.note");
    const res = statusSelect.list.findIndex((item) => item.value === value);
    return res >= 0 ? res : 0;
  },
  set(newVal) {
    newVal = statusSelect.list[newVal].value;
    vk.setVuex("runningData.activeClassification.note", newVal);
  },
});

const getClassification = () => {
  const store = uni.vk.getVuexStore();
  const res = store.getters["baseData/note"];
  statusSelect.list = [
    { name: "全部", value: "" },
    ...res.map((item) => ({ name: item.name, value: item._id })),
  ];
};

getClassification();

// 状态筛选确认
const statusSelectConfirm = () => {
  nextTick(reloadData);
};

// 加载下一页
const nextPage = () => {
  if (data.loadmore !== "loadmore") return;
  pagination.pageIndex++;
  loadData();
};

// 重新加载数据的函数，将页码重置为 1 并调用 loadData 函数加载数据
const reloadData = () => {
  pagination.pageIndex = 1;
  return loadData();
};

onMounted(reloadData);

const refresherTriggered = ref(false);
const refresherRefresh = () => {
  refresherTriggered.value = true;
  reloadData().finally(() => {
    refresherTriggered.value = false;
  });
};

// 加载数据·
const loadData = async () => {
  data.loadmore = "loading";
  try {
    if (pagination.pageIndex === 1) {
      data.list = [];
    }
    const { data: res } = await uni.vk.callFunction({
      url: "client/note/kh/getNoteList",
      data: {
        pageSize: pagination.pageSize,
        pageIndex: pagination.pageIndex,
        classification_id: statusSelect.list[statusSelect.current].value,
      },
    });
    if (pagination.pageIndex === 1) {
      data.list = res.rows;
    } else {
      data.list = [...data.list, ...res.rows];
    }

    data.total = res.total;
    data.loadmore = res.hasMore ? "loadmore" : "nomore";
  } catch (e) {
    console.error(e);
    data.loadmore = "loadmore";
  }
};

// 新增
const toAdd = () => {
  const classification_id = statusSelect.list[statusSelect.current].value;
  uni.vk.navigateTo({
    url: `/subPages/note/addOrEdit?mode=add&classification_id=${classification_id}`,
  });
};

// 编辑
const edit = () => {
  uni.vk.navigateTo({
    url: `/subPages/note/addOrEdit?id=${currentRow.value._id}&mode=edit`,
  });
};

// 删除
const del = () => {
  uni.vk.confirm("确定删除吗？", "提示").then((res) => {
    if (res.confirm) {
      uni.vk
        .callFunction({
          url: "client/note/kh/deleteNote",
          data: { _id: currentRow.value._id },
        })
        .then(() => {
          uni.vk.toast("删除成功");
          uni.$emit("refreshNoteList");
        });
    }
  });
};

// 查看
const view = () => {
  uni.vk.navigateTo({
    url: `/subPages/note/detailView?id=${currentRow.value._id}`,
  });
};

const handleMenu = (item) => {
  currentRow.value = item;
  show.value = true;
};

// 操作弹窗
const show = ref(false);
const currentRow = ref(null);
const clickAction = (index) => {
  if (index === 0) {
    view();
  } else if (index === 1) {
    edit();
  } else if (index === 2) {
    del();
  }
};

uni.$on("refreshNoteList", reloadData);
onBeforeUnmount(() => {
  uni.$off("refreshNoteList", reloadData);
});
</script>

<style lang="scss" scoped>
.note-container {
  background-color: $u-bg-color;
  position: relative;
  height: calc(100vh - var(--window-top));

  .filter-area {
    width: 100%;
    // display: flex;
    // align-items: center;
    white-space: nowrap;
    .fa-item {
      display: inline-block;
      padding: 5px 15px;
      margin: 10px 5px 0;
      border-radius: 5px;
      background-color: #fff;
      font-size: 14px;
      &:first-child {
        margin-left: 12px;
      }
      &:last-child {
        margin-right: 12px;
      }
    }
    .active {
      background-color: $u-type-primary;
      color: #fff;
    }
  }

  .list-container {
    padding: 10px 12px 0;
    width: calc(100% - 24px);
    height: calc(100% - 60px);
  }

  .add-btn {
    position: fixed;
    bottom: 6vw;
    right: 6vw;
    width: 2.5em;
    height: 2.5em;
    background-color: $u-type-primary;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    z-index: 999;
  }
}
</style>
